$def with (page)

<header id="header-bar" class="header-bar">
  <div class="hamburger-component">
    <button type="button" class="hamburger-button"><img src="/static/images/menu.png" alt="additional options menu"/></button>
    <div class="hamburger-dropdown-component navigation-dropdown-component">
      <ul class="dropdown-menu hamburger-dropdown-menu">
        $if not ctx.user:
          <li><a href="/account/login">$_("Log in")</a></li>
          <li><a href="/account/create">$_("Sign up")</a></li>

        <li><a href="/books/add">$_("Add a Book")</a></li>
        <li><a href="/sponsorship">$_("Sponsor a Book")</a></li>
        <li><a href="/recentchanges">$_("Recent Community Edits")</a></li>
        <li><a href="/developers">$_("Developer Center")</a></li>
        <li><a href="/help">$_("Help & Support")</a></li>
      </ul>
    </div>
  </div>

  <div class="logo-component">
    <a href="/" title="The Internet Archive's Open Library: One page for every book">
      <div class="logo-txt">
        <img class="logo-icon" src="/static/images/openlibrary-logo-tighter.svg"
          width="194" height="47"
          alt="Open Library logo"/>
      </div>
    </a>
  </div>

  <div class="search-component">
    <div class="search-bar-component">
      <div class="search-bar">
        <div class="search-facet">
          <label class="search-facet-selector">
            <span aria-hidden="true" class="search-facet-value"></span>
            <select aria-label="Search by">
              <option value='all'>$_("All")</option>
              <option value='title'>$_("Title")</option>
              <option value='author'>$_("Author")</option>
              <option value='text'>$_("Text")</option>
              <option value='subject'>$_("Subject")</option>
              <option value='lists'>$_("Lists")</option>
              <option value='advanced'>$_("Advanced")</option>
            </select>
          </label>
        </div>
        <form class="search-bar-input" action="/search" method="get">
          <input type="text" name="q" placeholder="$_('Search')" autocomplete="off">
          <input name="mode" type="checkbox" aria-hidden="true" checked="checked" value="" id="ftokenstop" class="hidden instantsearch-mode">
          <input type="submit" value="" class="search-bar-submit" aria-label="Search submit">
        </form>
      </div>
      <div class="search-dropdown">
        <ul class="search-results">
        </ul>
      </div>
    </div>
  </div>

  <ul class="navigation-component">
    <li class="browse-menu">
      <a>$_('Browse') <img class="down-arrow"
        width="7" height="4" aria-hidden="true" src="/static/images/down-arrow.png" alt="" role="presentation"/></a>
      <div class="navigation-dropdown-component">
        <ul class="dropdown-menu browse-menu-options">
          <li><a href="/subjects">$_("Subjects")</a></li>
          <li><a href="/lists">$_("Lists")</a></li>
          <li><a href="/k-12">$_("K-12 Student Library")</a></li>
          <li><a href="/random">$_("Random Book")</a></li>
          <li><a href="/advancedsearch">$_("Advanced Search")</a></li>
        </ul>
      </div>
    </li>
    <li class="my-books-menu">
      <a>$_('My Books') <img class="down-arrow"
        width="7" height="4" aria-hidden="true" alt="" role="presentation" src="/static/images/down-arrow.png"/></a>
      <div class="navigation-dropdown-component">
        <ul class="dropdown-menu my-books-menu-options">
          <li><a href="/account/loans">$_("My Loans")</a></li>
          <li><a href="/account/books">$_("My Reading Log")</a></li>
          <li><a href="/account/books/already-read/stats">$_("My Reading Stats")</a></li>
          <li><a href="/account/lists">$_("My Lists")</a></li>
        </ul>
      </div>
    </li>
    <li class="more-menu">
      <a>$_('More') <img class="down-arrow"
        width="7" height="4" aria-hidden="true" alt="" role="presentation" src="/static/images/down-arrow.png"/></a>
      <div class="navigation-dropdown-component">
        <ul class="dropdown-menu more-menu-options">
          <li><a href="/books/add">$_("Add a Book")</a></li>
          <li><a href="/sponsorship">$_("Sponsor a Book")</a></li>
          <li><a href="/recentchanges">$_("Recent Community Edits")</a></li>
          <li><a href="/developers">$_("Developer Center")</a></li>
          <li><a href="/help">$_("Help & Support")</a></li>
        </ul>
      </div>
    </li>
  </ul>

  $if not ctx.user:
    <ul class="auth-component">
      <li class="hide-me">
        <a class="btn"
           href="/account/login">$_("Log In")</a></li>
      <li><a class="btn primary" href="/account/create">$_("Sign Up")</a></li>
    </ul>

  $if ctx.user:
    <div class="account-component">
      <div class="dropdown-avatar">
        <button class="avatar" id="userToggle" aria-label="My account" style="background-image: url('https://archive.org/services/img/$(get_internet_archive_id(ctx.user.key))');"></button>
        <img class="down-arrow" aria-hidden="true" src="/static/images/down-arrow.png" role="presentation" alt=""/>
      </div>
      <div class="account-dropdown navigation-dropdown-component" id="main-account-dropdown">
        <ul class="dropdown-menu">
          <li><a href="$homepath()/account/loans">$_("My Loans")</a></li>
          <li><a href="$ctx.user.key/lists">$_("My Lists")</a></li>
          <li><a href="$ctx.user.key">$_("My Profile")</a></li>
          <li><a href="$homepath()/account">$_("Settings")</a></li>
          <li>
            <form name="logout" action="/account/logout" method="post">
              <a href="#" onclick="document.forms['logout'].submit()">$_("Log out")</a>
            </form>
          </li>
        </ul>
      </div>
    </div>
</header>
